<template>
	<view class="bgw">
		<view class="u-flex">
			<view class="scroll-left-wrap">
				<scroll-view :scroll-y="true" class='scroll-box'>
					<template v-for="(v,i) in leftMenuList" :key="v.id">
						<view :class="['left-menu',leftMenuCurrent == i ?'active':'']" @click="leftMenuClick(v,i)">
							<view class="u-rela">
								{{v.name}}
								<u-badge :is-dot="true" type="primary" v-if="menuActive[v.id]"
									:offset="[0,20]"></u-badge>
							</view>
						</view>
					</template>
				</scroll-view>
			</view>
			<view class="u-flex-1">
				<scroll-view :scroll-y="true" class='scroll-box'>
					<u-radio-group v-model="radioValue" :wrap="true" class="radio-group">
						<template v-for="(v,i) in radioList" :key="v.id">
							<u-radio :name="v.id" shape="circle" class="radio">{{v.name}}</u-radio>
						</template>
					</u-radio-group>
				</scroll-view>
			</view>
		</view>
		<view class="btn-wrap u-flex u-p-10">
			<view class="u-flex-1 u-p-10">
				<u-button type="default" @click="reset" class="btn-block btn-grey">重置</u-button>
			</view>
			<view class="u-flex-1 u-p-10">
				<u-button type="primary" @click="submit" class="btn-block">确定</u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import store from '@/store/index.js'; //需要引入store
	import {
		ref,
		reactive,
		computed,
		onMounted,
		getCurrentInstance,
		watch,
	} from 'vue'
	const {
		proxy,
	} = getCurrentInstance()
	const emit = defineEmits(['submit', 'reset'])
	const props = defineProps({
		houseType: {
			type: [String, Number],
			default: '',
		},
		fenliId: {
			type: [String, Number],
			default: '',
		}
	})
	const menuActive = reactive({});
	const leftMenuList = computed(() => {
		let citys = store.state.$citys;
		let city = store.state.$location;
		let {
			city_code,
			province_code
		} = city;
		let arr = [{
			id: 'all',
			name: '不限'
		}];
		try {
			let item = citys.find(v => v.id == province_code);
			let item2 = item.children.find(v => v.id == city_code);
			arr = arr.concat(item2.children);
		} catch (e) {
			//TODO handle the exception
		}
		return arr;
	})
	const radioValue = ref('all');
	const radioList = reactive([])

	const leftMenuCurrent = ref(0);
	onMounted(() => {
		setRadioList('all');
	})
	const setRadioList = (id) => {
		radioList.splice(0, radioList.length);
		if (id == 'all') {
			leftMenuList.value.forEach(v => {
				radioList.push(v)
			})
		} else {
			getData(id);
		}
	}
	watch(leftMenuCurrent, (newValue) => {
		let id = leftMenuList.value[newValue].id;
		setRadioList(id);
	})
	watch(radioValue, (newValue) => {
		let flag = false;
		if(newValue == 'all'){
			leftMenuList.value.forEach(v=>{
				menuActive[v.id] = false
			})
		}else{
			let [district_code, pianqu_id] = (newValue + '').split('||');
			let curr = ''
			if(pianqu_id){
				curr = district_code;
			}else{
				curr = 'all'
			}
			leftMenuList.value.forEach(v=>{
				if(v.id == curr){
					menuActive[v.id] = true
				}else{
					menuActive[v.id] = false
				}
			})
		}
	})
	

	const leftMenuClick = (v, i) => {
		let {
			id
		} = v;
		if (leftMenuCurrent == i) {
			return
		}
		leftMenuCurrent.value = i
	}
	const getData = async (id) => {
		let district_code = id;
		let key = `houseFilterArea${id}`;
		let data = store.getters.get_houseFilter[key];
		if (!data) {
			await proxy.$u.api.houseFilterArea({
				district_code: district_code
			}).then(res => {
				let {
					code,msg
				} = res;
				if(code == 200){
					data = res.data.data
					store.commit('set_houseFilterItem', {
						key: key,
						value: data
					})
				}else{
					uni.$u.toast(msg || '错误');
				}
			}).catch(res => {

			})
		}
		data.forEach(v => {
			radioList.push({
				id: district_code + '||' + v.pianqu_id,
				name: v.pianqu_title,
			})
		})
	}
	const reset = () => {
		radioValue.value = 'all';
		let data = {
			district_code: '',
			pianqu_id: ''
		};
		emit('reset', data)
	}
	const submit = () => {
		let v = radioValue.value;
		let data = {
			district_code: '',
			pianqu_id: ''
		};
		if (v) {
			let [district_code, pianqu_id] = (v + '').split('||');
			data.district_code = district_code == 'all'?'':district_code;
			data.pianqu_id = pianqu_id || '';
		}
		emit('submit', data)
	}
	const setValue = (data) => {
		if (data.district_code && data.pianqu_id) {
			radioValue.value = [data.district_code, data.pianqu_id].join('||');
			leftMenuCurrent.value = leftMenuList.value.findIndex(v => v.id == Number(data.district_code))
		} else if (data.district_code) {
			leftMenuCurrent.value = 0;
			radioValue.value = Number(data.district_code)
		} else {
			radioValue.value = 'all'
		}
	}
	defineExpose({
		setValue
	})
</script>

<style lang="scss" scoped>
	.scroll-left-wrap {
		width: 212upx;
		background: #F8F8F8;
	}

	.left-menu {
		height: 80rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;

		&.active {
			background-color: #ffffff;
			color: #249CFF;
		}
	}

	.scroll-box {
		height: 600upx;
	}

	.radio-group {
		width: 100%;
	}

	.btn-wrap {
		box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(231, 235, 238, 0.3);
	}

	.tag-item {
		height: 64rpx;
		background: #F6F6F6;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		line-height: 64upx;
		text-align: center;
		font-size: 24upx;
		margin: 10upx;
	}
</style>